<template>
	<div class="change-theme">
		<el-dropdown @command="changeTheme">
			<span class="el-dropdown-link">
				{{ currentThemeStr }}
				<el-icon class="el-icon--right">
					<arrow-down />
				</el-icon>
			</span>
			<!-- <template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="theme-blue">
						<div class="them-item" :class="{ active: currentTheme == 'theme-blue' }">
							<span class="circle blue-circle"></span>
							<span>蓝色主题</span>
						</div>
					</el-dropdown-item>
					<el-dropdown-item command="theme-dark">
						<div class="theme-item" :class="{ active: currentTheme == 'theme-dark' }">
							<span class="circle dark-circle"></span>
							<span>暗色主题</span>
						</div>
					</el-dropdown-item>
				</el-dropdown-menu>
			</template> -->
		</el-dropdown>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

const currentTheme = ref('');

const currentThemeStr = computed(() => {
	return currentTheme.value === 'theme-blue' ? '蓝色主题' : '暗色主题';
});

const changeTheme = (theme: string) => {
	document.body.setAttribute('data-theme', theme);
	localStorage.setItem('theme', theme);
};
</script>

<style lang="scss" scoped>
.change-theme {
	padding: 10px;
	display: inline-block;
	align-items: center;
	vertical-align: middle;
	height: 30px;
	line-height: 30px;
}

.example-showcase .el-dropdown-link {
	cursor: pointer;
	color: #333;
	display: flex;
	align-items: center;
	border: none;
}
.circle {
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border-radius: 50%;
	display: inline-block;
}
.blue-circle {
	background-color: #409eff;
}
.dark-circle {
	background-color: #003a8c;
}
.theme-item {
	display: flex;
	align-items: center;
}
:deep(.el-dropdown) {
	color: #333;
	&:hover {
		border: none;
	}
}
</style>
